{% extends "base.html" %}

{% block title %}课程列表 - 校园生活助手{% endblock %}

{% block css %}
<style>
    .course-card {
        border-radius: 8px;
        overflow: hidden;
        transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    }
    .course-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    }
    .course-header {
        padding: 1rem;
        background-color: #f8f9fa;
        border-bottom: 1px solid #e9ecef;
    }
    .course-body {
        padding: 1.5rem;
    }
    .course-tag {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        margin-right: 0.5rem;
        margin-bottom: 0.5rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-12">
        <div class="bg-white rounded-lg shadow-sm p-4">
            <div class="d-flex justify-content-between align-items-center">
                <h1 class="text-2xl font-bold text-gray-800">
                    <i class="fa fa-book mr-2 text-primary"></i>我的课程
                </h1>
                <a href="{{ url_for('add_course') }}" class="btn btn-primary">
                    <i class="fa fa-plus-circle mr-2"></i>添加课程
                </a>
            </div>
            
            <!-- 搜索和筛选 -->
            <div class="mt-4">
                <div class="row">
                    <div class="col-md-6">
                        <form method="GET" action="{{ url_for('courses') }}" class="input-group">
                            <input type="text" name="search" class="form-control" placeholder="搜索课程名称或教师" value="{{ search_term }}">
                            <button type="submit" class="btn btn-primary">
                                <i class="fa fa-search"></i>
                            </button>
                        </form>
                    </div>
                    <div class="col-md-4">
                        <select name="semester" class="form-select" onchange="this.form.submit()">
                            <option value="">所有学期</option>
                            {% for semester in semesters %}
                            <option value="{{ semester }}" {% if current_semester == semester %}selected{% endif %}>{{ semester }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-2">
                        <select name="sort" class="form-select" onchange="this.form.submit()">
                            <option value="name" {% if sort_by == 'name' %}selected{% endif %}>按名称排序</option>
                            <option value="teacher" {% if sort_by == 'teacher' %}selected{% endif %}>按教师排序</option>
                            <option value="credits" {% if sort_by == 'credits' %}selected{% endif %}>按学分排序</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 课程列表 -->
<div class="row">
    {% for course in courses.items %}
    <div class="col-md-4 mb-4">
        <div class="course-card border">
            <div class="course-header">
                <div class="d-flex justify-content-between align-items-center">
                    <span class="text-sm text-gray-600">{{ course.semester }}</span>
                    <div class="dropdown">
                        <button class="btn btn-sm btn-transparent" type="button" id="courseActions-{{ course.id }}" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="fa fa-ellipsis-v"></i>
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="courseActions-{{ course.id }}">
                            <li><a class="dropdown-item" href="{{ url_for('edit_course', course_id=course.id) }}"><i class="fa fa-pencil mr-2"></i>编辑</a></li>
                            <li><a class="dropdown-item" href="{{ url_for('add_score', course_id=course.id) }}"><i class="fa fa-plus-square mr-2"></i>添加成绩</a></li>
                            <li><a class="dropdown-item" href="#" onclick="confirmDeleteCourse('{{ course.id }}', '{{ course.name }}')"><i class="fa fa-trash mr-2"></i>删除</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="course-body">
                <h3 class="text-lg font-bold text-gray-800 mb-2">{{ course.name }}</h3>
                <div class="mb-3">
                    <p class="text-gray-600 mb-1"><i class="fa fa-user-o mr-2"></i>授课教师: {{ course.teacher }}</p>
                    <p class="text-gray-600 mb-1"><i class="fa fa-credit-card mr-2"></i>学分: {{ course.credits }}</p>
                    <p class="text-gray-600 mb-1"><i class="fa fa-book mr-2"></i>课程类型: {{ course.type }}</p>
                    <p class="text-gray-600 mb-1"><i class="fa fa-calendar mr-2"></i>上课时间: {{ course.schedule }}</p>
                    <p class="text-gray-600 mb-3"><i class="fa fa-map-marker mr-2"></i>上课地点: {{ course.location }}</p>
                </div>
                
                <!-- 课程标签 -->
                <div class="flex flex-wrap mb-3">
                    {% for tag in course.tags %}
                    <span class="course-tag bg-blue-100 text-blue-800">#{{ tag.name }}</span>
                    {% endfor %}
                </div>
                
                <!-- 课程成绩 -->
                <div class="mb-3">
                    <div class="d-flex justify-content-between mb-1">
                        <span class="text-sm font-medium text-gray-700">课程成绩</span>
                        <span class="text-sm font-medium text-gray-700">{{ course.latest_score or '未评定' }}</span>
                    </div>
                    {% if course.latest_score %}
                    <div class="w-full bg-gray-200 rounded-full h-1.5">
                        <div class="bg-blue-600 h-1.5 rounded-full" style="width: {{ (course.latest_score / 100) * 100 }}%"></div>
                    </div>
                    {% endif %}
                </div>
                
                <!-- 操作按钮 -->
                <div class="d-flex justify-content-between">
                    <a href="{{ url_for('course_detail', course_id=course.id) }}" class="btn btn-outline-primary btn-sm">
                        <i class="fa fa-eye mr-1"></i>详情
                    </a>
                    <a href="{{ url_for('course_materials', course_id=course.id) }}" class="btn btn-outline-secondary btn-sm">
                        <i class="fa fa-folder-open mr-1"></i>学习资料
                    </a>
                </div>
            </div>
        </div>
    </div>
    {% else %}
    <div class="col-12">
        <div class="bg-white rounded-lg shadow-sm p-8 text-center">
            <i class="fa fa-book text-gray-300 text-5xl mb-4"></i>
            <h3 class="text-xl font-bold text-gray-600 mb-2">暂无课程</h3>
            <p class="text-gray-500 mb-4">您还没有添加任何课程，点击下方按钮添加课程。</p>
            <a href="{{ url_for('add_course') }}" class="btn btn-primary">
                <i class="fa fa-plus-circle mr-2"></i>添加课程
            </a>
        </div>
    </div>
    {% endfor %}
</div>

<!-- 分页 -->
{% if courses.pages > 1 %}
<div class="row mt-4">
    <div class="col-12">
        <div class="bg-white rounded-lg shadow-sm p-4">
            <nav aria-label="课程分页">
                <ul class="pagination justify-content-center">
                    {% if courses.has_prev %}
                    <li class="page-item">
                        <a class="page-link" href="{{ url_for('courses', page=courses.prev_num, search=search_term, semester=current_semester, sort=sort_by) }}" aria-label="上一页">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    {% else %}
                    <li class="page-item disabled">
                        <span class="page-link" aria-hidden="true">&laquo;</span>
                    </li>
                    {% endif %}
                    
                    {% for page in courses.iter_pages(left_edge=2, right_edge=2, left_current=2, right_current=2) %}
                    {% if page %}
                        {% if page == courses.page %}
                        <li class="page-item active">
                            <span class="page-link">{{ page }}</span>
                        </li>
                        {% else %}
                        <li class="page-item">
                            <a class="page-link" href="{{ url_for('courses', page=page, search=search_term, semester=current_semester, sort=sort_by) }}">{{ page }}</a>
                        </li>
                        {% endif %}
                    {% else %}
                    <li class="page-item disabled">
                        <span class="page-link">...</span>
                    </li>
                    {% endif %}
                    {% endfor %}
                    
                    {% if courses.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="{{ url_for('courses', page=courses.next_num, search=search_term, semester=current_semester, sort=sort_by) }}" aria-label="下一页">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                    {% else %}
                    <li class="page-item disabled">
                        <span class="page-link" aria-hidden="true">&raquo;</span>
                    </li>
                    {% endif %}
                </ul>
            </nav>
        </div>
    </div>
</div>
{% endif %}

<!-- 删除确认模态框 -->
<div class="modal fade" id="deleteCourseModal" tabindex="-1" aria-labelledby="deleteCourseModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteCourseModalLabel">确认删除课程</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>您确定要删除课程 <span id="courseNameToDelete" class="font-bold text-danger"></span> 吗？</p>
                <p class="text-sm text-gray-500 mt-2">注意：删除课程将同时删除相关的成绩和资料，此操作不可恢复。</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <form id="deleteCourseForm" method="POST" action="">
                    <button type="submit" class="btn btn-danger">删除</button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script>
    // 确认删除课程
    function confirmDeleteCourse(courseId, courseName) {
        document.getElementById('courseNameToDelete').textContent = courseName;
        document.getElementById('deleteCourseForm').action = '{{ url_for('delete_course', course_id='') }}' + courseId;
        const deleteModal = new bootstrap.Modal(document.getElementById('deleteCourseModal'));
        deleteModal.show();
    }
    
    // 添加页面载入动画
    document.addEventListener('DOMContentLoaded', function() {
        const courseCards = document.querySelectorAll('.course-card');
        courseCards.forEach((card, index) => {
            card.style.opacity = '0';
            card.style.transform = 'translateY(20px)';
            setTimeout(() => {
                card.style.opacity = '1';
                card.style.transform = 'translateY(0)';
                card.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
            }, 100 * index);
        });
    });
</script>
{% endblock %}